import { Descriptions, Select } from 'antd';

const SetComponment = (props) => {
  let getComponment = () => {
    let { uploadInfo } = props;
    let { tableElements } = uploadInfo;
    let reuslt = [];
    let options = [];

    let xhr = new XMLHttpRequest();
    xhr.open('POST', API_URL + '/importTable/getAllType', false); // 设置为同步请求
    xhr.send();

    if (xhr.status === 200) {
      let response = JSON.parse(xhr.responseText);
      options = Object.keys(response).map((key) => {
        return { value: key, label: response[key] };
      });
    } else {
      // 处理请求失败的情况
    }
    const handleChange = (rowNum, colNum, value) => {
      let { uploadInfo } = props;
      let { tableElements } = uploadInfo;
      let newTableElements = tableElements.map((e) => {
        if (e.rowNum == rowNum && e.colNum == colNum) {
          return { ...e, dataType: value }; // 返回新对象并应用新的值
        }
        return e; // 对于其他对象，保持不变
      });
      uploadInfo.tableElements = newTableElements;
      props.setUploadInfo(uploadInfo);
    };
    tableElements.map((e) => {
      let { rowNum, colNum, dataType, title } = e;
      let key = rowNum + '-' + colNum;
      let tableElement = {
        key,
        label: title,
        children: (
          <Select
            defaultValue={dataType}
            style={{ width: 120 }}
            options={options}
            onChange={(value) => handleChange(rowNum, colNum, value)}
          />
        ),
      };
      reuslt.push(tableElement);
    });
    return reuslt;
  };

  return <Descriptions title="组件类型" layout="vertical" bordered items={getComponment()} />;
};
export default SetComponment;
